<template>
	<view class="content">
		<!--<view style="width: 25%; margin-top: 1%">
			
			<view class="block-bg" id="mycharts" style="width:100%;height: 60%;"></view>
			
			<view class="block-bg" id="fissionRate" style="width: 100%;height: 35%; margin-top: 5%;"></view>
		</view>

		<view style="width:50%; margin-top: 1%; position: relative;">
			<view style="position: absolute; left: 30px; top: 0px; font-size: 14px; color: #FFFFFF;">报名总数: {{total_invite_count}}</view>
			<view style="position: absolute; left: 30px; top: 60px; font-size: 14px; color: #FFFFFF;">开通总数: {{total_convert_count}}</view>
			<view style="position: absolute; left: 30px; top: 90px; font-size: 14px; color: #FFFFFF;">开通比例: {{((total_convert_count/total_invite_count)*100).toFixed(2)+'%'}}</view>
			<view style="position: absolute; left: 30px; top: 30px; font-size: 14px; color: #FFFFFF;">参与邀约数: {{total_invite_factory}}</view>
			<view id="myChartChina" style="width:100%;height: 60%;"></view>
			<view class="block-bg" id="everydayInvite" style="width: 90%; height: 35%; margin-top: 2.5%; margin-left: 5%;"></view>
		</view>
		<view style="width: 25%; margin-top: 1%">
			<view class="block-bg" id="personInvite" style="width:100%;height: 60%;"></view>
			<view class="block-bg" id="convertRate" style="width: 100%;height: 35%;margin-top: 5%;"></view>
		</view>-->
		<view class="block-bg" id="everydayInvite" style="width: 90%; height: 35%; margin-top: 2.5%; margin-left: 5%;"></view>
	</view>
</template>

<script>
import echarts from 'echarts';
import china from 'echarts/map/json/china.json';
echarts.registerMap('china', china);
export default {
	data() {
		return {
			domain_url: 'http://bm.live.nkjjq.cn/',
			activity_id: 0,
			total_invite_count:0,
			total_invite_factory:0,
			total_convert_count:0
		};
	},
	onLoad(option) {
		this.activity_id = option.activity_id;
	},
	mounted() {
		this.drawCompanyInvite();
		this.drawPersonInvite();
		this.drawChina();
		this.drawEverydayInvite();
		this.drawConvertRate();
		this.fissionRate();
		setInterval(res=>{
			this.drawCompanyInvite();
			this.drawPersonInvite();
			this.drawChina();
			this.drawEverydayInvite();
			this.drawConvertRate();
			this.fissionRate();
		},20000)
		
	},
	methods: {
		drawCompanyInvite() {
			uni.request({
				url: this.domain_url + 'api/count_factory_invite',
				method: 'GET',
				data: {
					activity_id: this.activity_id
				},
				success: res => {
					let data = res['data']['result'];
					let company_invite_data = [];
					let company_invite_series_data = [];
					let total_convert_count = 0;
					console.log(data)
					for (let i = 0; i < data.length; i++) {
						company_invite_data.push(data[i]['name']);
						total_convert_count+=data[i]['create_count']
						company_invite_series_data.push(data[i]['invite_count']);
					}
					this.total_convert_count = total_convert_count

					this.total_invite_factory = company_invite_data.length
					let company_invite_data_length = 15 - company_invite_data.length;
					if (company_invite_data_length > 0) {
						for (let j = 0; j < company_invite_data_length; j++) {
							company_invite_data.push('无');
						}
					}
					let myCharts = echarts.init(document.getElementById('mycharts'));
					myCharts.setOption({
						color: '#0c70fc',
						title: {
							text: '邀约排行(工厂)',
							textStyle: {
								color: '#FFFFFF'
							}
						},
						tooltip: {},
						grid: {
							right: '10%',
							top: '40rpx',
							left: '5%',
							bottom: 0,
							containLabel: true
						},
						xAxis: {
							show: false
						},

						yAxis: {
							position: 'left',
							axisLabel: {
								interval: 0,
								rotate: 0
							},
							data: company_invite_data,
							inverse: true,
							axisLine: {
								show: false,
								lineStyle: { color: '#FFFFFF' }
							},
							splitNumber: 15
						},
						series: [
							{
								name: '邀请数量',
								type: 'bar',
								data: company_invite_series_data,
								itemStyle: {
									barBorderRadius: [0, 2, 2, 0]
								},
								barWidth: 10, //柱图宽度
								label: {
									show: true, //开启显示
									position: 'right', //在上方显示
									textStyle: {
										//数值样式
										color: '#FFFFFF'
									}
								}
							}
						]
					});
				}
			});
		},
		drawEverydayInvite() {
			uni.request({
				url: this.domain_url + 'api/everyday_invite',
				method: 'GET',
				data: {
					activity_id: this.activity_id
				},
				success: res => {
					let data = res['data']['result'];
					let everyday_invite_data = [];
					let everyday_invite_series_data = [];
					for (let i = 0; i < data.length; i++) {
						everyday_invite_data.push(data[i]['name']);
						everyday_invite_series_data.push(data[i]['invite_count']);
					}
					let everyday_invite_data_length = 15 - everyday_invite_data.length;
					if (everyday_invite_data_length > 0) {
						for (let j = 0; j < everyday_invite_data_length; j++) {
							everyday_invite_data.push('无');
						}
					}
					let myCharts = echarts.init(document.getElementById('everydayInvite'));
					myCharts.setOption({
						color: '#0c70fc',
						title: {
							text: '每日邀约',
							textStyle: {
								color: '#FFFFFF'
							}
						},
						tooltip: {},
						grid: {
							right: '10%',
							top: '50rpx',
							left: '5%',
							bottom: 0,
							containLabel: true
						},
						xAxis: {
							position: 'left',
							axisLabel: {
								interval: 0,
								rotate: 0,
								fontSize:8
							},
							data: everyday_invite_data,
							
							inverse: true,
							axisLine: {
								show: false,
								lineStyle: { color: '#FFFFFF' }
							}
						},
						yAxis: {
							show: true,
							axisLine: {
								show: false,
								lineStyle: { color: '#FFFFFF' }
							}
						},
						series: [
							{
								name: '邀请数量',
								type: 'bar',
								data: everyday_invite_series_data,
								itemStyle: {
									barBorderRadius: [0, 2, 2, 0]
								},
								barWidth: 15, //柱图宽度

								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: {
										//数值样式
										color: '#FFFFFF'
									}
								}
							}
						]
					});
				}
			});
		},
		drawPersonInvite() {
			uni.request({
				url: this.domain_url + 'api/count_person_invite',
				method: 'GET',
				data: {
					activity_id: this.activity_id
				},
				success: res => {
					let data = res['data']['result'];
					let person_invite_data = [];
					let person_invite_series_data = [];
					for (let i = 0; i < data.length; i++) {
						person_invite_data.push(data[i]['name']);
						person_invite_series_data.push(data[i]['invite_count']);
					}
					let person_invite_data_length = 15 - person_invite_data.length;
					if (person_invite_data_length > 0) {
						for (let j = 0; j < person_invite_data_length; j++) {
							person_invite_data.push('无');
						}
					}
					let myCharts = echarts.init(document.getElementById('personInvite'));
					myCharts.setOption({
						color: '#0c70fc',
						title: {
							text: '邀约排行(个人)',
							textStyle: {
								color: '#FFFFFF'
							}
						},
						tooltip: {},
						grid: {
							right: '10%',
							top: '40rpx',
							left: '5%',
							bottom: 0,
							containLabel: true
						},
						xAxis: {
							show: false
						},
						yAxis: {
							position: 'left',
							axisLabel: {
								interval: 0,
								rotate: 0,
								width: '20%'
							},
							data: person_invite_data,
							inverse: true,
							axisLine: {
								show: false,
								lineStyle: { color: '#FFFFFF' }
							}
						},
						series: [
							{
								name: '邀请数量',
								type: 'bar',
								data: person_invite_series_data,
								itemStyle: {
									barBorderRadius: [0, 2, 2, 0]
								},
								barWidth: 10, //柱图宽度
								label: {
									show: true, //开启显示
									position: 'right', //在上方显示
									textStyle: {
										//数值样式
										color: '#FFFFFF'
									}
								}
							}
						]
					});
				}
			});
		},
		drawConvertRate() {
			uni.request({
				url: this.domain_url + 'api/convert_rate',
				method: 'GET',
				data: {
					activity_id: this.activity_id
				},
				success: res => {
					let data = res['data']['result'];
					var i = 0;
					var colors = ['#066af4', '#1cceec'];
					let myCharts = echarts.init(document.getElementById('convertRate'));
					myCharts.setOption({
						title: {
							text: '转化率',
							textStyle: {
								color: '#FFFFFF'
							}
						},

						legend: {
							orient: 'horizontal',
							bottom: '0',
							data: ['访客', '报名客户'],
							textStyle: {
								color: '#FFFFFF'
							}
						},

						animation: false,
						color: ['#066af4', '#1cceec'],
						series: [
							{
								type: 'pie',
								data: [
									{
										name: '访客',
										value: data['user_total_count'] - data['invite_count']
									},
									{
										name: '报名客户',
										value: data['invite_count']
									}
								],
								label: {
									show: true,
									position: 'inside',
									color: '#FFFFFF',
									formatter: '{d}%'
								}
							}
						]
					});
				}
			});
		},
		fissionRate() {
			uni.request({
				url: this.domain_url + 'api/fission_rate',
				method: 'GET',
				data: {
					activity_id: this.activity_id
				},
				success: res => {
					let data = res['data']['result'];
					this.total_invite_count = data['total_invite_count']
					var i = 0;
					var colors = ['#066af4', '#1cceec'];
					let myCharts = echarts.init(document.getElementById('fissionRate'));
					myCharts.setOption({
						title: {
							text: '裂变指数',
							textStyle: {
								color: '#FFFFFF'
							}
						},

						legend: {
							orient: 'horizontal',
							bottom: '0',
							data: ['邀约客户', '裂变客户'],
							textStyle: {
								color: '#FFFFFF'
							}
						},

						animation: false,
						color: ['#066af4', '#1cceec'],
						series: [
							{
								type: 'pie',
								data: [
									{
										name: '邀约客户',
										value: data['total_invite_count']-data['fission_count']
									},
									{
										name: '裂变客户',
										value: data['fission_count']
									}
								],
								label: {
									show: true,
									position: 'inside',
									color: '#FFFFFF',
									formatter: '{d}%'
								}
							}
						]
					});
				}
			});
		},

		drawChina() {
			uni.request({
				url: this.domain_url + 'api/count_china_invite',
				method: 'GET',
				data: {
					activity_id: this.activity_id
				},
				success: res => {
					let data = res['data']['result'];
					console.log(data);
					// 基于准备好的dom，初始化echarts实例
					let myChartContainer = document.getElementById('myChartChina');

					let myChartChina = echarts.init(myChartContainer);

					function randomData() {
						return Math.round(Math.random() * 1500);
					}
					// 绘制图表
					let optionMap = {
						title: {
							text: '报名客户分布图',
							textStyle: {
								color: '#FFFFFF'
							},
							left: 'center'
						},
						tooltip: {
							formatter: '{a}\n{b}:{c}'
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							data: ['']
						},
						visualMap: {
							type: 'piecewise',
							min: 0,
							max: 1500,
							left: '10%',
							bottom: 'bottom',
							textStyle: {
								color: '#FFFFFF'
							},

							pieces: [
								// 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
								
								{ gte: 1, lte: 9, label: '1-9', color: '#91f6ff' }, // (900, 1000]
								{ gte: 10, lte: 99, label: '10-99', color: '#61d2fc' }, // (500, 900]
								{ gte: 100, label: '≥100', color: '#0081ff' } // (310, 500]
							]
						},

						series: [
							{
								name: '客户报名数',
								type: 'map',
								map: 'china',
								zoom: 1.2,

								showLegendSymbol: false,
								label: {
									show: true,
									fontSize: 10,
									color: '#FFFFFF',
									align: 'center'
								},
								emphasis: {
									label: {
										show: true,
										color: '#fff'
									},
									itemStyle: {
										areaColor: '#032c64'
									}
								},
								data: data
							}
						]
					};

					myChartChina.setOption(optionMap);
				}
			});
		}
	}
};
</script>

<style lang="less">
.content {
	display: flex;
	padding: 0;
	height: 100vh;
}
.block-bg{
	background: url(../../static/img/chart-wrapper.png) no-repeat;
	background-size: 100% 100%;
	padding: 1%;
}
</style>
